<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ELAT - Lufthansa Tecknik</title>
   
    <link href="css/themes/humanity/jquery-ui-1.8.1.custom.css" media="screen" type="text/css"
        rel="stylesheet" />
    <link href="css/ui.jqgrid.css" media="screen" type="text/css" rel="stylesheet" />
	<link href="css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-dynamic-form.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <!--[if ie 6]>
    	<link href="css/bugs/ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->

    <script type="text/javascript" language="javascript">
	//<![CDATA[
	
	
	
	
	function customDeleteRow(e)
	{
		jQuery("#gridPVT").delGridRow( e );
	}
	
    function customeEditRow(id){ 				
				jQuery("#gridPVT").setSelection('"'+id+'"');
				setTimeout(function(){
				var gr = jQuery("#gridPVT").jqGrid('getGridParam','selrow'); 
				if( gr != null ) 
					jQuery("#gridPVT").jqGrid('editGridRow',gr,{height:280,reloadAfterSubmit:false}); 
				else 
					alert("Please Select Row");
				
				 var winH = $(window).height();  
         var winW = $(window).width();  
                 
         //Set the popup window to center  
		 $('.jqmOverlay').css("opacity","0.5");
        $('#editmodgridPVT').css('top',  winH/2-$('#editmodgridPVT').height()/2).css('height','230px');
         $('#editmodgridPVT').css('left', winW/2-$('#editmodgridPVT').width()/2);  
				
				//if(!$('#divDummyEditPVT').length) //inserting only once
				//		$('#editcntgridPVT').eq(0).html('<div id="divDummyEditPVT" class="divDummyEditPVT">'+$('#editcntgridPVT').eq(0).html()+'</div>');
				
				},100);
		 
		
	}
	
	var jqgrid;
	
	function pickdates(id){
				jQuery("#"+id+"_sdate","#gridPVT").datepicker({dateFormat:"yy-mm-dd"}); 
			} 
    var lastsel3;
    var mydata3= [
				{id:"12345",uploadedat:"06.07.2010 11:55 AM",filetype:"Image type", filename:		"<a href='#'>PAC Bite DAIMB 060710.zip</a>", uploadedby:"wb54user",segments :"<div>Taisigns: D-AIMB</span>"},
				{id:"23456",uploadedat:"07.07.2010 12:32 AM",filetype:"Document type", filename:	"<a href='#'>PAC Bite DAIMB 060710.zip</a>", uploadedby:"wb54user",	segments:"<div>Taisign: D-AIMB</div>"},
				{id:"34568",uploadedat:"01.07.2010 02:55 AM",filetype:"Image type",filename:		"<a href='#'>PAC Bite DAIMB 060710.zip</a>", uploadedby:"wb54user",	segments:"<div>Taisigns: D-AIMB,D-AIMB Classes: All System: IFE</div>"},
				{id:"12349",uploadedat:"05.07.2010 11:55 AM",filetype:"Compressed type",filename:	"<a href='#'>PAC Bite DAIMB 060710.zip</a>", uploadedby:"wb54user",	segments:"<div>Class: First</div>"},
				{id:"23450",uploadedat:"03.07.2010 11:55 AM",filetype:"Compressed type",filename:	"<a href='#'>PAC Bite DAIMB 060710.zip</a>", uploadedby:"wb54user",	segments:"<div>Class: First</div>"},
				{id:"34561",uploadedat:"02.07.2010 11:55 AM",filetype:"Image type",filename:		"<a href='#'>PAC Bite DAIMB 060710.zip</a>", uploadedby:"wb54user",	segments:"<div>Class: First</div>"}				
			];
		$('document').ready(function(){
			jqgrid= jQuery("#gridPVT").jqGrid({
				datatype: "local",
				height: 113,
				colNames:['Uploaded At','File Type','File Name','Uploaded By','Segments',''],
				colModel:[
					{name:'uploadedat',index:'uploadedat', width:51,editable:true,formoptions:{ rowpos:1, label:"Name", elmprefix:"(*)" },editrules:{required:true}},
					{name:'filetype',index:'filetype',formoptions:{ rowpos:2, label: "Limit", elmprefix:"(*)"} ,edittype:"select",editoptions:{value:"image:Image type;doc:Document type;compress:Compressed type"},width:50, editable:true },
					{name:'filename',index:'filename', width:50,editable: true, edittype:'custom', editoptions:{custom_element: setAnchor, custom_value:getAnchor}},
					{name:'uploadedby',index:'uploadedby', width:50,editable: true},
					{name:'segments',index:'segments', width:50, editable: true, edittype:'custom',editoptions:{custom_element: setDiv, custom_value:getDiv}},
					{name:'controls',index:'controls',width:30 }
				],
				onSelectRow: function(id){			
					
					}
				,
				editurl: "server.php",
				altRows:true,
				autowidth: true,
				cellsubmit:'clientArray',
				cellEdit: true, 
				pager: '#pagerPVT',
				gridComplete: function(){ 
					var ids = jQuery("#gridPVT").jqGrid('getDataIDs'); 
					for(var i=0;i < ids.length;i++){ 
						var cl = ids[i]; 
						bDelete = "<div class='controlClass'><img src=\"css/images/delete.jpg\" onclick=\"customDeleteRow('"+cl+"');return false;\" /><!--<img src=\"css/images/edit.png\" onclick=\"customeEditRow('"+cl+"');return false;\" /><img src=\"css/images/edit.png\" /><img src=\"css/images/search.png\" onclick=\"//customeEditRow();\" />--></div>";
						
						aFile="<a href='#'></a>";
						
						jQuery("#gridPVT").jqGrid('setRowData',ids[i],{controls:bDelete,});
						
					} 
					
					if(!$('#recFound').length) //inserting only once
						$('#pagerPVT td').eq(0).after( '<td id="recFound">'+mydata3.length+' records found</td>');
					//$('#gridPVT tr:nth-child(even)').addClass("ui-jqgrid-secondaryrowcolor");

				}, 
				caption: "Previously Uploaded Files"
			});
			
			
			for(var i=0;i < mydata3.length;i++)
				jQuery("#gridPVT").jqGrid('addRowData',mydata3[i].id,mydata3[i]);
			
			//jQuery("#gridPVT").jqGrid('navGrid',"#pagerPVT",{edit:true,add:true,del:true});
			jQuery("#gridPVT").jqGrid('navGrid','#pagerPVT',
				{edit:false,add:false,del:false},
				{view:true}, //options 
				{height:400,reloadAfterSubmit:false, jqModal:true, closeOnEscape:true, bottominfo:"Fields marked with (*) are required"}, // edit options 
				{height:400,reloadAfterSubmit:false,jqModal:true, closeOnEscape:true,bottominfo:"Fields marked with (*) are required", closeAfterAdd: true}, // add options 
				{reloadAfterSubmit:false,jqModal:true, closeOnEscape:true}, // del options 
				{closeOnEscape:true,multipleSearch:true}, // search options 
				{height:400,jqModal:true,closeOnEscape:true} // view options 
			); 
			
			
			$("#uploadData").dynamicForm("#plus",  "#minus", 
			{
				limit:20,
				afterClone:function(clone){
				alert(clone);
				//I won't be inserted in the DOM
				return false;
				}

			});
			});
			
			function setAnchor (value, options) {
				var el = document.createElement("input");
				el.type='text';
				el.value = $(value).text();				
				return el;
			}
 
			function getAnchor(elem) {
  				return '<a href="#">'+$(elem).val()+'</a>';
			}
			
			function setDiv(value, options)
			{
				var el = document.createElement("textarea");
				
				$(el).val($(value).text());				
				return el;
			}
			
			function getDiv(elem)
			{
				return '<div>'+$(elem).val()+'</div>';			
			}

		//]]>
    </script>

</head>
<body>
    <!--MAIN WRAPPER-->
    <div class="wrapper">
        <ul class="topBar">
            <li><a href="#" class="arrPrev">Previous</a></li>
            <li><a href="#" class="arrNext">Next</a></li>
            <li><a href="#" class="question">Help</a></li>
            <li class="right">
                <img src="css/images/logoLufthansa.jpg" alt="Lufthansa Technik" /></li>
        </ul>
        <div class="header">
            <h1 class="heading">
                A380 Cabin SLA Tool - Lufthansa Technik</h1>
        </div>
        <div class="mainMenu">
            <div class="menu">
                <ul>
                    <li class="leftBg"><a href="#">Performance<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#">Performance 1</a></li>
                            <li><a href="#">Performance 2</a></li>
                            <li><a href="#">Performance 3</a></li>
                            <li><a href="#">Performance 4</a></li>
                            <li><a class="drop" href="#">Performance 5<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Performance Sub 1</a></li>
                                    <li><a href="#">Performance Sub 2</a></li>
                                    <li><a href="#">Performance Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a class="drop" href="#">Performance 6<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Performance Sub 1</a></li>
                                    <li><a href="#">Performance Sub 2</a></li>
                                    <li><a href="#">Performance Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a class="drop" href="#">Performance 7<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Performance Sub 1</a></li>
                                    <li><a href="#">Performance Sub 2</a></li>
                                    <li><a href="#">Performance Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a href="#">Performance 8</a></li>
                            <li><a href="#">Performance 9</a></li>
                            <li><a href="#">Performance 10</a></li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        <div class="separator">
                        </div>
                    </li>
                    <li><a href="#">Segment<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#">Segment 1</a></li>
                            <li><a href="#">Segment 2</a></li>
                            <li><a href="#">Segment 3</a></li>
                            <li><a href="#">Segment 4</a></li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        <div class="separator">
                        </div>
                    </li>
                    <li><a href="#">Rules<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#">Rules 1</a></li>
                            <li><a href="#">Rules 2</a></li>
                            <li><a href="#">Rules 3</a></li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        <div class="separator">
                        </div>
                    </li>
                    <li><a href="#">Limits</a><div class="separator">
                    </div>
                    </li>
                    <li><a href="#">Alerts<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#">Alerts 1</a></li>
                            <li><a href="#">Alerts 2</a></li>
                            <li><a href="#">Alerts 3</a></li>
                            <li><a href="#">Alerts 4</a></li>
                            <li><a class="drop" href="#">Alerts 5<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Alerts Sub 1</a></li>
                                    <li><a href="#">Alerts Sub 2</a></li>
                                    <li><a href="#">Alerts Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a class="drop" href="#">Alerts 6<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Alerts Sub 1</a></li>
                                    <li><a href="#">Alerts Sub 2</a></li>
                                    <li><a href="#">Alerts Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        <div class="separator">
                        </div>
                    </li>
                    <li><a href="#">Data<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#">Data 1</a></li>
                            <li><a href="#">Data 2</a></li>
                            <li><a href="#">Data 3</a></li>
                            <li><a href="#">Data 4</a></li>
                            <li><a class="drop" href="#">Data 5<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Data Sub 1</a></li>
                                    <li><a href="#">Data Sub 2</a></li>
                                    <li><a href="#">Data Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        <div class="separator">
                        </div>
                    </li>
                    <li><a href="#">Configuration<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#">Configuration 1</a></li>
                            <li><a href="#">Configuration 2</a></li>
                            <li><a class="drop" href="#">Configuration 3<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Configuration Sub 1</a></li>
                                    <li><a href="#">Configuration Sub 2</a></li>
                                    <li><a href="#">Configuration Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a href="#">Configuration 4</a></li>
                            <li><a href="#">Configuration 5</a></li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        <div class="separator">
                        </div>
                    </li>
                    <li><a href="#">Users<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#">Users 1</a></li>
                            <li><a href="#">Users 2</a></li>
                            <li><a class="drop" href="#">Users 3<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Users Sub 1</a></li>
                                    <li><a href="#">Users Sub 2</a></li>
                                    <li><a href="#">Users Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a href="#">Users 4</a></li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        <div class="separator">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div class="title">
                &gt; Data
            </div>
            <div class="contentIn">
                <div class="contentTitleOrange">
                   Upload Data
                </div>
                <div class="boxGrey">
                    <div class="boxGreyTop">
                    </div>
                    <div class="boxGreyDesc limit">
                    
						<div class="data">						
						<form  name="uploadfile" method="post" enctype="multipart/form-data">
						<p id="uploadData">                        	
							<select>
                                 <option>File type</option>
                            </select>
                            <input type="file" size="35" value="Select File..." />                            
                                                         
                            <span class="inline"><a id="minus" href=""></a> <a id="plus" href=""></a></span>
						</p>
						
						<input type="submit" value="Upload Files" class="btnGreyB left"/>
						</form>
                        </div>
                    </div>
                   
                    <div class="boxGreyBot">
                    </div>
                </div>
                <table id="gridPVT">
                </table>
                <div id="pagerPVT">
                </div>
                <select>
                    <option>Export As</option>
                </select>
            </div>
        </div>
    </div>
</body>
</html>
